<template>
  <div :class="{ hidden: hidden }" class="pagination-uncode">
    <el-pagination :background="background" :current-page="current" :page-size="pageSize" :layout="layout" :page-sizes="pageSizes" :total="total" v-bind="$attrs" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
  </div>
</template>

<script>
import { scrollTo } from "@/utils/scroll-to";

export default {
  name: "Pagination",
  props: {
    total: {
      required: true,
      type: Number,
    },
    page: {
      type: Number,
      default: 1,
    },
    limit: {
      type: Number,
      default: 20,
    },
    pageSizes: {
      type: Array,
      default() {
        return [10, 20, 30, 50];
      },
    },
    layout: {
      type: String,
      default: " prev, pager, next ",
    },
    background: {
      type: Boolean,
      default: true,
    },
    autoScroll: {
      type: Boolean,
      default: true,
    },
    hidden: {
      type: Boolean,
      default: false,
    },
    pageSize: {
      type: Number,
      default: 10,
    },
    current: {
      type: Number,
      default: 1,
    },
  },
  computed: {
    // currentPage: {
    //   get() {
    //     return this.page;
    //   },
    //   set(val) {
    //     this.$emit("update:page", val);
    //   },
    // },
    // pageSize: {
    //   get() {
    //     return this.limit;
    //   },
    //   set(val) {
    //     this.$emit("update:limit", val);
    //   },
    // },
  },
  methods: {
    handleSizeChange(val) {
      this.$emit("handleSizeChange", val);
      if (this.autoScroll) {
        scrollTo(0, 800);
      }
    },
    handleCurrentChange(val) {
      this.$emit("handleCurrentChange", val);
      if (this.autoScroll) {
        scrollTo(0, 800);
      }
    },
  },
};
</script>

<style scoped>
.pagination-uncode {
  background: #fff;
  /* padding: 32px 16px; */
  margin: 10px 10px 0 0;
  text-align: right;
}
.pagination-uncode.hidden {
  display: none;
}
.pagination-uncode /deep/ .el-icon-arrow-left:before {
  content: "上一页";
}
.pagination-uncode /deep/ .el-icon-arrow-right:before {
  content: "下一页";
}
.pagination-uncode /deep/ .el-pagination.is-background /deep/ .btn-prev {
  border-left: 1px solid #c0c4cc;
}
.pagination-uncode /deep/ .el-pagination.is-background /deep/ .btn-prev,
.pagination-uncode /deep/ .el-pagination.is-background /deep/ .btn-next {
  margin: 0;
  background-color: #fff;
  color: #aaaaaa;
  min-width: 67px;
  border-radius: 0;
  border-top: 1px solid #c0c4cc;
  border-bottom: 1px solid #c0c4cc;
  border-right: 1px solid #c0c4cc;
}
.pagination-uncode /deep/ .el-pagination /deep/ .el-pager li {
  margin: 0 !important;
  border-radius: 0 !important;
  border-right: 1px solid #c0c4cc;
  border-top: 1px solid #c0c4cc;
  border-bottom: 1px solid #c0c4cc;
  border-right: 1px solid #c0c4cc;
}
.pagination-uncode
  /deep/
  .el-pagination.is-background
  /deep/
  .el-pager
  li:not(.disabled).active {
  background-color: #39a0ff;
  color: #ffffff;
}
</style>
